<script setup lang="ts">
import { RouterView } from 'vue-router';
import { useStore } from 'vuex';
interface Permission {
  _id: string;          // 权限唯一标识（菜单索引）
  permission_name: string; // 菜单标题（如"查看文章"）
  resource: string;      // 资源类型（用于分组，如"article"对应"文章管理"）
  action: string;        // 操作类型（如"read"对应"查看"）
  description?: string;  // 描述（可选）
}
const store = useStore();


const userPermissions = store.state.userPermissions; // 从 Vuex 获取权限列表
const userName=store.state.userInfo; // 从 Vuex 获取用户名
// 递归构建菜单层级（根据 resource 分组）
const buildMenus = (permissions: Permission[]) => {
  // 1. 按 resource 分组（生成一级菜单）
  const resourceGroups: Record<string, Permission[]> = {};
  permissions.forEach(perm => {// 遍历权限列表
    const groupKey = perm.permission_name.split('-')[0]; // 资源类型
    if (!resourceGroups[groupKey]) {// 资源类型不存在，创建新数组
      resourceGroups[groupKey] = [];
    }
    resourceGroups[groupKey].push(perm);
  });
  // 2. 转换为 Element Plus 菜单需要的格式
  return Object.keys(resourceGroups).map(resource => ({
    index: `${resource}`, // 一级菜单索引（如"group_article"）
    title: resource,            // 一级菜单标题（如"article"可翻译为"文章管理"）
    children: resourceGroups[resource].map(perm => ({
      index: `${perm.resource}${perm.action}`,          // 子菜单索引（使用权限 _id）
      title: perm.permission_name, // 子菜单标题（如"查看文章"）
    }))
  }));
};

// 生成最终菜单结构（直接传入 userPermissions）
const visibleMenus = buildMenus(userPermissions as Permission[]); // 显式类型断言

// 退出登录
import { ArrowDown } from '@element-plus/icons-vue'

const handleCommand = (command: string | number | object) => {
  if(command === 'a'){
    console.log('个人页面');
  }else{
    // 退出登录
    store.commit('logout'); // 清除用户信息
    location.reload(); // 刷新页面
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <h2>学院管理系统</h2>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /><span style="margin-left: 10px; color: #fff">{{ userName.username }}</span><el-icon
              class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">个人页面</el-dropdown-item>
              <el-dropdown-item command="b">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="12">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
              default-active="Courseread" text-color="#fff"  router="true">
              <!-- 动态渲染一级菜单（resource 分组） -->
              <template v-for="menu in visibleMenus">
                <el-sub-menu :key="menu.index" :index="menu.index" v-if="menu.children.length">
                  <template #title>
                    <!-- 可选：根据 resource 动态设置图标（示例使用固定图标） -->
                    <el-icon>
                      <Document />
                    </el-icon>
                    <span>{{ menu.title }}</span>
                  </template>
                  <!-- 渲染子菜单（具体权限） -->
                  <el-menu-item-group>
                    <el-menu-item v-for="child in menu.children" :key="child.index" :index="child.index">
                      {{ child.title }}
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  color: white;
  padding: 0 20px;
}

.el-menu-vertical-demo {
  width: 200px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown-link{
  display: flex;
  align-items: center;
}
.demo-type {
  display: flex;
}

.demo-type>div {
  flex: 1;
  text-align: center;
}

.demo-type>div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>
